<template>
  <div class="login-container">
    <div class="login-icon">
      <img src="@/assets/home/logo.png" alt="" />
      <div class="line"></div>
      <div v-if="tabActiveIndex == 0" class="title">登录</div>
      <div v-else class="title">注册</div>
    </div>
    <div class="login-wrapper">
      <!-- 标签页容器 - 图片中的特殊形状设计 -->
      <div v-if="tabActiveIndex == 0" class="tab-container-login">
        <div class="login-tab" @click="tabActiveIndex = 0">
          <img
            src="@/assets/home/logo_active.png"
            alt=""
            style="max-width: 20px; margin-right: 10px"
          />
          登录
        </div>
      </div>
      <div v-else class="tab-container-register">
        <div class="login-tab" @click="tabActiveIndex = 0">登录</div>
      </div>

      <!-- 登录内容区域 -->
      <div class="login-content">
        <!-- 微信登录标题 -->
        <div style="width: 100%; display: flex">
          <div class="login-title content">微信登录</div>
        </div>

        <!-- 二维码区域 -->
        <div class="qrcode-container">
          <img class="qrcode" :src="qrcode" alt="" />
          <div class="scan-tip">使用微信扫一扫</div>
          <!-- <wxlogin
            id="login_container"
            :appid="appid"
            :redirect_uri="getRedirect_uri()"
            :scope="scope"
            :href="href"
            :style="{ height: '240px' }"
            state="STATE"
          ></wxlogin> -->
        </div>

        <!-- 异常处理链接 -->
        <div class="help-section f13">
          登录异常？可咨询<a href="#" class="help-link" @click="login">客服</a>
        </div>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="copyright">
      <p>北京优易捷科技有限责任公司 版权所有 © 2008-2025 Inc.</p>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import wxlogin from "vue-wxlogin";
import { Message } from "element-ui";
import axios from "axios";

export default {
  name: "Login",
  components: {
    wxlogin,
  },
  data() {
    return {
      qrcode: "",
      loginData: {
        aliUserId: "aliUserId",
        birthday: "",
        buyerUserId: 542,
        cardId: 0,
        cardNumber: "",
        channelCode: "",
        createTime: "",
        credit: 0,
        growth: 0,
        headImage:
          "https://lingxin1314.oss-cn-beijing.aliyuncs.com/391b1f56a776594dd2dd14076c4ce34.jpg",
        ifBlack: 0,
        ifFirst: 0,
        lastLoginIp: "",
        memberLevelId: 15,
        memberLevelName: "普通会员",
        name: "云窗旅人",
        username: "云窗旅人",
        nextLevelGrowth: 3800,
        nextLevelName: "白银会员",
        password: "",
        phone: "15201611813",
        reMoney: "",
        reName: "",
        refreshToken:
          "Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJhMzc0ODhmN2QzNWM0Mjk5OWUzMDk2NmIzM2U0YWU3NCIsInVzZXIiOiIxNTIwMTYxMTgxMyIsInN1YiI6IjE1MjAxNjExODEzIn0.knJdUK-Xd6FsmfnhNYIrGCYEBsALMqYiUVyv2fYUr_ezIa7jARniCZi0TatKpaVVTMH_NQfY7izxmsjTgUuPoA",
        registerIp: "",
        remark: "",
        sessionKey: "",
        sex: "",
        state: 1,
        terminal: 0,
        token:
          "Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIyZThiZDVlZGI5NzQ0YTEzODEzYTU5MzVmOGY1YjVhMCIsInVzZXIiOiIxNTIwMTYxMTgxMyIsInN1YiI6IjE1MjAxNjExODEzIn0.yhcI5SiYgT9Qwm0bB87xaBqNU3F6cGCTfwa2VIyjVg1R-iOeJ5D_gLTbIYRl5sg45PMNuLI5nSsB5ys5HW0o8w",
        type: "",
        unitName: "",
        updateTime: "",
        wechatName: "MJ54761",
        wechatNumber: "",
        wechatOpenId: "",
        wechatUnionId: "",
      },

      tabActiveIndex: 0, //默认显示登录tab
      isLoginTab: true,
      countdown: 60,
      timer: null,
      appid: "wxef625270eda5492e", // 公众号appid
      scope: "snsapi_login", //网页默认即可
      unionid: null,
      href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7DQogICAgd2lkdGg6IDE2MHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0K", //修改二维码样式
    };
  },
  mounted() {
    // 启动二维码刷新倒计时
    this.startRefreshTimer();
    // 生成微信二维码
    this.generateWechatQrcode();
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 测试登录  待接口真实对接
    login() {
      console.log("是否登录成功");
      this.$api.login
        .login({
          phone: "15201611813",
          terminal: 5,
          type: "2",
          verificationCode: "1774",
        })
        .then((res) => {
          console.log("是否登录成功", res, this.loginData);

          // 假设res.data包含用户登录信息
          // 如果真实接口返回的是res.data格式，就用res.data
          // 如果是模拟数据，就用this.loginData
          const userInfo = this.loginData;

          // 调用Vuex存储登录信息
          this.$store
            .dispatch("user/login", userInfo)
            .then(() => {
              // 登录成功后的操作，例如跳转到首页
              this.$message.success("登录成功");
              // 这里可以根据需要跳转到对应页面
              this.$router.push("/");
            })
            .catch((error) => {
              console.error("存储登录信息失败", error);
              this.$message.error("登录信息存储失败");
            });
        })
        .catch((error) => {
          console.error("登录失败", error);
          this.$message.error("登录失败，请重试");
        });
    },
    // 回调地址获取
    getRedirect_uri() {
      let protocolStr = document.location.protocol;
      return encodeURIComponent(protocolStr + "//www.zytsaas.com/Home/Index");
    },
    // 生成微信二维码
    async generateWechatQrcode() {
      console.log("开始生成微信二维码了");
      this.$api.login.login().then((res) => {
        this.qrcode = res.data.qr;
        // if (res.data instanceof Blob || res.data instanceof File) {
        //   // const url = URL.createObjectURL(res.data);
        //   // 后续操作（如赋值给 img.src）
        //   // console.log("是否登录成功了", url);
        // } else {
        //   console.error("参数不是 Blob/File 类型");
        // }

        // let imageUrl = URL.createObjectURL(res.data);
        // this.qrcode = imageUrl;
      });

      // 这里需要替换为你在微信开放平台申请的 appid
      // const appid = "wx98f0ef4bc5edea18";
      // const redirectUri = encodeURIComponent("YOUR_REDIRECT_URI"); // 授权后重定向的回调链接，需在微信开放平台配置
      // const scope = "snsapi_login"; // 应用授权作用域，snsapi_login 用于微信登录
      // const state = "STATE"; // 用于保持请求和回调的状态，可自定义
      // const qrcodeUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
      // this.qrcodeUrl = qrcodeUrl;
      // this.$nextTick(() => {
      //   new QRCode("qrcode", {
      //     text: this.qrcodeUrl,
      //     width: 150,
      //     height: 150,
      //   });
      // });
    },
    wxLoginApi(openid, unionid) {
      console.log("wxLoginApi");
      // this.$http
      //   .post("/Base_Manage/Base_VIPUserInfo/GetVIPUserInfoData", {
      //     openid,
      //     unionid,
      //   })
      //   .then(async (res) => {
      //     this.loading = false;
      //     if (res.Success) {
      //       if (res.Data.Token) {
      //         TokenCache.setToken(res.Data.Token);
      //         await this.$store.dispatch("getUserInfo");
      //         //设置Vuex登录标志为true，默认userLogin为false
      //         await this.$store.dispatch("setUser", true);
      //         this.$router.replace({ path: "/Project/All" });
      //       } else {
      //         this.loginAndRegisterShow = true;
      //         this.showPrise = false;
      //         this.$message.error("当前微信号尚未关联手机号,请进行注册");
      //       }
      //     } else {
      //       this.loginAndRegisterShow = true;
      //       this.showPrise = false;
      //       this.$message.error("当前微信号尚未关联手机号,请进行注册");
      //     }
      //   });
    },
    // 刷新二维码
    refreshQrcode() {
      // 这里可以添加刷新二维码的逻辑
      Message.success("二维码已刷新");
      this.resetRefreshTimer();
    },

    // 启动刷新定时器
    startRefreshTimer() {
      this.countdown = 60;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.refreshQrcode();
        }
      }, 1000);
    },

    // 重置刷新定时器
    resetRefreshTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.startRefreshTimer();
    },

    // 咨询客服
    contactService() {
      Message.info("正在连接客服...");
    },
  },
};
</script>

<style scoped lang="scss">
// 全局样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-icon {
  left: 0;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  margin: 50px 0 0 50px;
  .line {
    border: 1px solid #348cf8;
    width: 0px;
    height: 38px;
    opacity: 0.6;
    margin: 0 20px;
  }
  .title {
    font-size: 16px;
    color: #348cf8;
  }
}
.login-container {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/login/login_back.png");
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;

  // 装饰背景元素 - 模拟图片中的浅灰色纹理
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 20% 30%,
        rgba(255, 255, 255, 0.7) 0%,
        transparent 25%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(255, 255, 255, 0.5) 0%,
        transparent 30%
      ),
      radial-gradient(
        circle at 50% 80%,
        rgba(255, 255, 255, 0.6) 0%,
        transparent 35%
      );
    pointer-events: none;
  }
}

.logo-area {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

// 主要登录容器 - 完全按照图片重写样式
.login-wrapper {
  width: 430px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

// 标签页容器 - 特殊形状设计
.tab-container-login {
  display: flex;
  height: 60px;
  position: relative;
  // 登录标签样式
  .login-tab {
    flex: 6;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding-left: 30px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    background: #ffffff;
    position: relative;
    z-index: 2;
    border-top-right-radius: 10px;

    &.active {
      color: #333;
    }

    .tab-icon {
      margin-right: 6px;
      font-size: 18px;
    }
  }
}

.tab-container-register {
  display: flex;
  height: 60px;
  position: relative;
  // 登录标签样式
  .login-tab {
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    background: #348cf8;
    position: relative;
    border-bottom-right-radius: 25px;
    margin-right: -13px;
  }
}

// 登录内容区域
.login-content {
  padding: 15px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 微信登录标题样式
.login-title {
  font-size: 16px;
  font-weight: 500;
  color: #348cf8;
  margin-bottom: 30px;
  padding-bottom: 15px;
  text-align: center;
  position: relative;

  // 使用 content 方式添加下划线
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 73px;
    height: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #348cf8;
  }
}

// 二维码容器
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  .scan-tip {
    font-size: 13px;
    color: #818181;
    margin-top: -20px;
  }
}

// 二维码包装器
.qrcode-wrapper {
  // width: 200px;
  // background: #ffffff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}

// 二维码图片
.qrcode {
  width: 190px;
  height: 190px;
}

// 帮助链接区域
.help-section {
  text-align: center;
}

// 帮助链接样式
.help-link {
  font-size: 13px;
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.help-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

// 版权信息样式
.copyright {
  position: absolute;
  bottom: 20px;
  text-align: center;
  font-size: 12px;
  color: #323232;
  z-index: 1;
}

// 响应式设计
@media (max-width: 480px) {
  .login-wrapper {
    width: 100%;
    max-width: 360px;
  }

  .login-content {
    padding: 30px 20px;
  }

  .qrcode-wrapper {
    width: 180px;
    height: 180px;
  }

  .qrcode {
    width: 140px;
    height: 140px;
  }

  .copyright {
    position: relative;
    margin-top: 30px;
    bottom: auto;
  }
}
</style>
